<template>
  <div class="h-full flex flex-col">
    <div class="chart_title">实时收益</div>
    <div ref="chartRef" class="flex-1 mt-4"></div>
  </div>
</template>

<script setup>
import echarts from "~/utils/echarts.config";
import useEcharts from "@/hooks/useEcharts";

const props = defineProps({
  datas: {
    type: Object,
    required: true,
  },
});
const { echartResize, echartFontSetting } = useEcharts();
const chartRef = ref();
const myChart = ref();

const hanleSeries = () => {
  const results = [];
  for (let i = 0, len = props.datas.types.length; i < len; i++) {
    const item = props.datas.types[i];
    results.push({
      name: item, // 数据系列的名称
      type: "line", // 图表类型为折线图
      stack: "订单收益", // 数据堆叠的分组名称
      areaStyle: {}, // 区域样式，用于填充折线图下方的区域
      emphasis: {
        focus: "series", // 设置强调样式，当鼠标悬停在图表上时，将强调整个数据系列
      },
      data: props.datas.incomes[i],
    });
  }
  return results;
};
const chartInit = () => {
  const option = {
    grid: {
      left: "5%", // 图表左边距占整体宽度的百分比
      right: "5%", // 图表右边距占整体宽度的百分比
      top: "15%", // 图表上边距占整体高度的百分比
      bottom: "5%", // 图表下边距占整体高度的百分比
      containLabel: true, // 是否包含坐标轴标签，默认为 false
    },
    tooltip: {
      trigger: "axis", // 触发类型为坐标轴触发
      axisPointer: {
        type: "cross", // 坐标轴指示器类型为十字准星
        label: {
          backgroundColor: "#6a7985", // 指示器标签的背景颜色
        },
      },
    },
    // x轴配置
    xAxis: {
      type: "category", // 类型为类目轴
      data: props.datas.times,
      axisLine: {
        lineStyle: {
          color: "#333", // x轴轴线颜色
        },
      },
    },
    // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
    legend: {
      data: props.datas.types,
      type: "scroll", // 'plain'：普通图例。缺省就是普通图例。 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用
      formatter: name => {
        return name; // 格式化显示名称
      },
    },
    // y轴配置
    yAxis: {
      type: "value", // 类型为数值轴
      axisLine: {
        lineStyle: {
          color: "#333", // x轴轴线颜色
        },
      },
      axisLabel: {
        formatter: value => {
          return value + " 万元";
        }, // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
        color: "#333", // y轴标签颜色
        fontSize: 16, // y轴标签字体大小
      },
    },
    // 数据系列配置
    series: hanleSeries(),
  };
  option && myChart.value.setOption({ ...option, ...echartFontSetting() });
};

watch(() => props.datas, chartInit);

onMounted(() => {
  myChart.value = echarts.init(chartRef.value);
  echartResize(myChart.value);
  chartInit();
});
</script>

<style lang="scss" scoped></style>
